<template>
  <div class="select" :class="{ darkSelect: getSetValue('base')('darkTheme') }">
    <div class="selectItem" @click="item.action?.()" :key="item.key" v-for="item in props.options">
      <selectItem :item="item" />
    </div>
  </div>
</template>

<script setup lang="ts">
import selectItem from './selectItem.vue'
const { getSetValue } = chatSettingStore()
const props = defineProps<{
  options: SelectOptions[];
}>();
</script>
<style scoped lang="scss">
.select {
  backdrop-filter: saturate(2) blur(20px) !important;
  border-radius: 8px;
  transition: opacity 0.1s ease;
  display: flex;
  width: max-content;
  flex-direction: column;
  position: absolute;
  user-select: none;
}

.darkSelect {
  background: rgba(34, 36, 47, 0.8);
}

.selectItem {
  height: 28px;
  box-sizing: border-box;
  position: relative;
  font-size: 12px;
  cursor: default;
  margin: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
</style>
